<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#add").click(function(){
                let inText = $("#inText").val();
                let li = "<li>"+inText+"</li>";

                // 将追加的选项添加到ul子标签的末尾
                // $("ul").html($("ul").html()+li);
                // $("ul").append(li);
                // $(li).appendTo($("ul"));

                // 将追加的选项添加到列表的第一项
                // $("li:first").before(li);
                // $(li).insertBefore($("li:first"));

                // 使用外部插入的方式将追加的元素添加到末尾
                // $("li:last").after(li);
                $(li).insertAfter($("li:last"));
            });
            $("li").click(function(){
                // let li = "<li>"+$(this).html()+"</li>";
                // let li = "<li>"+$(this).html()+"</li>";

                // 通过clone方法克隆一个新的元素
                // let li = $(this).clone();
                let li = $(this).clone(true);
                $("ul").append(li);
            });
            $("#delete").click(function(){
                // 删除指定元素
                $("ul").remove();
            });
            $("#clear").click(function(){
                // 清除指定元素标签体的所有内容
                $("ul").empty();
            });
        });
    </script>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="text" id="inText">
<button id="add">追加</button>
<button id="delete">删除列表</button>
<button id="clear">清空列表</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>